<template>
    <div>
        <a-card>
            <div class="mb-sixteen">
                <a-button type="primary" @click="refresh" style="margin-left: 8px;">刷新</a-button>
            </div>
            <div class="mb-sixteen pagesList">
                <a-table bordered :rowKey="(record, index) => {
                    return index;
                }
                    " :columns="columns" :data-source="list" :pagination="false" :scroll="{ x: '100%' }">
                  <template slot="warnTip"  slot-scope="text,record">
                    <div v-if="record.warnTip=='red'" style="color: red">严重</div>
                    <div v-if="record.warnTip=='yellow'" style="color: yellow">警告</div>
                    <div v-if="record.warnTip=='blue'" style="color: green">一般</div>
                  </template>
                </a-table>

            </div>
            <div class="text-right" v-if="total > 0">
                <a-pagination :total="total" :current="searchForm.page" :page-size.sync="searchForm.size"
                    :page-size-options="$pageSizeOptions" @change="handlePageNo" @showSizeChange="showSizeChange"
                    show-size-changer />
            </div>
        </a-card>

    </div>
</template>

<script>
import { getWarningsBySensorCode} from "@/services/device";

const columns = [
    {
        title: '预警时间',
        dataIndex: 'warning_time',
    },
    {
        title: '预警项',
        dataIndex: 'parammeter_code',
    },
    {
        title: '预警标志',
        dataIndex: 'warnTip',
      scopedSlots: { customRender: 'warnTip' },
    },
    {
        title: '预警值',
        dataIndex: 'warnValue',
    }
]
export default {
    name: "earlyWarningInfo",
    data() {
        return {
            columns,
            list: [{ id: 1, name: '名称名称' }, { id: 2 }],

            searchForm: {
                page: 1,
                size: 15
            },
            total: 20,
        }
    },

  mounted() {
    this.getData();
    this.id=this.$route.query.id
  },
    methods: {
      refresh(){
        this.searchForm={
          page: 1,
          size: 15
        };
        this.list=[];
        this.getData()
      },
      getData() {
        this.list=[]
        let data={
          page_number: this.searchForm.page,
          sensorSn:this.$route.query.id,
          page_size: this.searchForm.size
        }
        getWarningsBySensorCode(data).then((res) => {
          let list=res.warnList
          this.list = list
          this.total =Number(res.pages)*this.searchForm.size;


        }).catch(() => {

        });
      },
        showSizeChange(current, pageSize) {
          this.searchForm.size = pageSize
          this.getData()
        },
        handlePageNo(current) {
          this.searchForm.page = current;
          this.getData()
        },
    }
}
</script>
<style scoped lang="less">
/deep/.ant-pagination-prev .ant-pagination-item-link,
.ant-pagination-next .ant-pagination-item-link {
    background-color: #42487A;
    border-color: #999da0;
    color: #898a94;
}

/deep/.ant-pagination-next .ant-pagination-item-link {
    background-color: #42487A;
    border-color: #999da0;
    color: #898a94;
}

/deep/ .ant-pagination-item {
    background-color: #42487A;
    border-color: #999da0;

}

/deep/ .ant-pagination-item a {
    color: #898a94;
}

/deep/ .ant-pagination-item-active {
    border-color: #fff;
}

/deep/ .ant-pagination-item-active a {
    color: #fff;
}

/deep/ .ant-select-selection {
    background-color: #42487A;
    border-color: #999da0;
    color: #898a94;
}

.modalcss {
    /deep/ .ant-table {
        color: #CFD2E8;
    }

    /deep/ .ant-table-thead>tr>th {
        color: #CFD2E8;
        background: #6D7090 !important;
        border-bottom: 1px solid #7D81A6;
    }

    /deep/ .ant-table-tbody>tr>td {
        background-color: #5C5F7D !important;
        border-bottom: 1px solid #7D81A6 !important;
    }

    /deep/ .ant-table-bordered .ant-table-thead>tr>th,
    /deep/ .ant-table-bordered .ant-table-tbody>tr>td {
        border-right: 1px solid #7D81A6 !important;
    }

    /deep/ .ant-table-bordered .ant-table-header>table,
    /deep/ .ant-table-bordered .ant-table-body>table,
    /deep/ .ant-table-bordered .ant-table-fixed-left table,
    /deep/ .ant-table-bordered .ant-table-fixed-right table {
        // border: 1px solid #7D81A6;
        border-color: #7D81A6;
        border-right: none;
        border-bottom: none;
    }

    //
}
</style>
